<template>
    <div class="translator-container">
        <div class="translator-box">
            <div class="language-selector">
                <a-select v-model:value="fromLang" class="lang-select" placeholder="源语言" size="large">
                    <a-select-option value="zh">中文</a-select-option>
                    <a-select-option value="en">英文</a-select-option>
                    <a-select-option value="ja">日文</a-select-option>
                    <a-select-option value="ko">韩文</a-select-option>
                </a-select>
                <span class="arrow">→</span>
                <a-select v-model:value="toLang" class="lang-select" placeholder="目标语言" size="large">
                    <a-select-option value="zh">中文</a-select-option>
                    <a-select-option value="en">英文</a-select-option>
                    <a-select-option value="ja">日文</a-select-option>
                    <a-select-option value="ko">韩文</a-select-option>
                </a-select>
            </div>
            <div class="input-group">
                <a-input v-model:value="inputText" :placeholder="'请输入' + getLanguageName(fromLang) + '文本'"
                    class="translator-input" size="large" :autoSize="{ minRows: 3, maxRows: 5 }" />
                <a-button type="primary" @click="handleTranslate" :loading="loading" size="large">
                    翻译
                </a-button>
            </div>
            <div class="result-box" v-if="translatedText">
                <p>{{ translatedText }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import phpApi from '@/api/request'
import { message } from 'ant-design-vue'

const inputText = ref('')
const translatedText = ref('')
const loading = ref(false)
const fromLang = ref('zh')
const toLang = ref('en')

const languageMap = {
    zh: '中文',
    en: '英文',
    ja: '日文',
    ko: '韩文'
}

const getLanguageName = (code: string) => {
    return languageMap[code as keyof typeof languageMap] || code
}

const handleTranslate = async () => {
    if (!inputText.value) {
        message.warning('请输入要翻译的文本')
        return
    }

    if (fromLang.value === toLang.value) {
        message.warning('源语言和目标语言不能相同')
        return
    }

    loading.value = true
    try {
        const result = await phpApi.translate(inputText.value, fromLang.value, toLang.value)
        translatedText.value = result
    } catch (error: any) {
        message.error(error.message || '翻译失败')
    } finally {
        loading.value = false
    }
}
</script>

<style scoped>
.translator-container {
    padding: 24px;
    width: 100%;
}

.translator-box {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.language-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 600px;
}

.lang-select {
    flex: 1;
}

.arrow {
    font-size: 24px;
    color: #666;
    flex: none;
}

.input-group {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 600px;
}

.translator-input {
    flex: 1;
}

.result-box {
    margin-top: 24px;
    padding: 24px;
    background: #f5f5f5;
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
}

.result-box h3 {
    margin-bottom: 12px;
    color: #333;
    font-size: 16px;
}

.result-box p {
    margin: 0;
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}
</style>